<template>
  <div class="basic-main">
    <div class="top">
      <Balance
        :title="`基础信息`"
        :show-column="false"
        :show-title="true"
        :show-date="false"
        :show-search="false"
      >
        <template #header>
          <div class="header">
            <div class="button thumb">升级到企业</div>
            <div class="button thumb" @click="logout">账号注销</div>
          </div>
        </template>
      </Balance>
    </div>

    <div class="info">
      <VeeForm
        :formData="formData"
        labelAlign="right"
        :schema="schema"
        :initialValues="{
          account_id: '12312312312312',
          nick_name:'12312312312',
          store_account: '17325764719',
        }"
      >
      <template #button="{validate,values}">
          <div class="button thumb" @click="()=>submit(validate,values)">
               确认修改
          </div>

      </template>
      </VeeForm>
    </div>
  </div>

  <Confirm
    title="确定要账户注销吗"
    v-model:show="showConfirm"
    @confirm="loginOut"
  />
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Balance from "@/components/Balance/index.vue";
import Confirm from "@/components/Confirm/index.vue";
import { GlobalStore } from "@/stores/index";
import { useRouter } from "vue-router";
import VeeForm from "@/components/VeeForm/index.vue";
import { FormData } from "@/components/VeeForm/interface";
import * as yup from "yup";
import { toast } from "vue3-toastify";

const globalStore = GlobalStore();

const router = useRouter();

const showConfirm = ref<boolean>(false);


const schema = yup.object().shape({
  portrait: yup
    .string()
    .required("请上传头像"),
  password: yup
    .string()
    .required("密码不为空")
    .min(5, "至少为5个字符")
    .max(20, "最多为20个字符"),
    nick_name: yup
    .string()
    .required("账号简称不为空")
    .max(20, "最多为20个字符"),
  confirm_password: yup
    .string()
    .required("确认密码不为空")
    .min(5, "至少为5个字符")
    .max(20, "最多为20个字符")
    .oneOf([yup.ref("password"), null], "密码不一致"),
});


const logout = () => {
  showConfirm.value = true;
};

const formData = ref<FormData>({
  portrait: {
    type: "oneUpload",
    label: "头像:",
  },
  account_id: {
    type: "input",
    label: "账号id:",
    disabled: true,
  },
  nick_name: {
    type: "input",
    label: "账号简称:",
  },
  store_account: {
    type: "input",
    label: "门店账号:",
    disabled: true,
  },
  password: {
    type: "input",
    label: "密码修改:",
    vBind:{type:'password'}
  },
  confirm_password: {
    type: "input",
    label: "确认密码:",
    vBind:{type:'password'}

  },
});

const loginOut = () => {
  globalStore.loginOut();
  router.push(`/home/index`);
};

const submit = async (validate:any,values:any)=>{
   const valid = (await validate()).valid;
   if(valid === false)  return toast.error(`信息填写错误`);
   console.log(values)
}

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
